<template>
    <div id="selectBox">
        <select name="" id="" v-model="val" @change="updateSubOptions(); filterResult(val)">
            <option selected>请选择</option>
            <option v-for="(item, index) in options" :value="item">{{ item }}</option>
        </select>
    </div>
</template>
<script setup>
import { computed } from '@vue/reactivity';
import { getCurrentInstance, defineEmits,onMounted, ref, watch } from 'vue'
import { getUserData } from '../utils';

const http = getCurrentInstance()?.appContext.config.globalProperties.$http

// 获得用户信息
// 获得用户信息
let userData = {
    Token: '',
    avatar: '',
    id: '',
    role: ''
}
if (getUserData() != undefined) {
    userData = getUserData();
}

const emits = defineEmits(['updateSubOptions', 'changePage'])

const val = ref()

const options = ref()
let sumPar = ref()

const props = defineProps({
    type: String
})
 

// 得到筛选选项
const getFilterOptions = function (params) {
    
    // 提交的参数,可以给下一级用
    sumPar.value = params
    
    console.log(params);
    params = JSON.stringify(params)
    fetch(http + '/gp/admin/user/get', {
        method: 'post',
        headers: {
            "Token": userData.Token,
            'Content-Type': 'application/json; charset=utf-8'
        },
        responseType: 'json',
        body: params
    }).then((response) => {
        return response.json()
    }).then((data) => {
        console.log(data);
        options.value = data.data   
    
    }).catch((err) => {
        console.log(err);
    })
}


const filterResult = (val)=>{
    let type1 = props.type
    let params= {current: 1, pageSize: 5, limit: {

    }}
    if(type1 == 'college'){
        params.limit.college = val
    }else if(type1 == 'major'){
        params.limit.major = val
    }
    console.log(params);
    emits('changePage', params)
}

// 更新下一级筛选选项
const updateSubOptions = function(){
    emits('updateSubOptions', val.value)
}

defineExpose({
    getFilterOptions,
    sumPar
})
</script>
<style scoped>
#selectBox select {
    background-color: #ffffff;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-radius: 6px;
    width: 100%;
    height: 44px;
    outline: none;
    border: 0px;
    color: #707070;
    padding-left: 13%;
    font-family: Source Han Sans CN;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 31px;
    letter-spacing: 0px;
    overflow: hidden;
    overflow: hidden;
    /* 第二步：让文本不会换行， 在同一行继续 */
    white-space: nowrap;
    /* 第三步：用省略号来代表未显示完的文本 */
    text-overflow: ellipsis;
    padding-right: 20%;
}

#selectBox select::-ms-expand {
    display: none;
}

#selectBox select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url(../assets/images/administrator/arrow-down-bold.svg) no-repeat 95% center;
    background-color: #fff;
    background-size: 10%;
}
</style>